<template>
  <div class="p-6px">
    <el-descriptions title="基础信息" border style="margin-bottom: 10px">
      <el-descriptions-item label="商品名称">{{ goodsInfo?.name }}</el-descriptions-item>
      <el-descriptions-item label="商品分类">{{ goodsInfo?.cate1?.name }}/{{ goodsInfo?.cate2?.name }}/{{
        goodsInfo?.cate3?.name
      }}</el-descriptions-item>
      <el-descriptions-item label="商品副标题">{{ goodsInfo?.sub_name }}</el-descriptions-item>
      <el-descriptions-item label="主图">
        <el-image class="rounded-full w-72px h-72px" :preview-teleported="true"
          :preview-src-list="goodsInfo?.slider_image" :src="goodsInfo?.main_image != null && goodsInfo?.main_image !== ''
        ? goodsInfo?.main_image
        : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        ">
          <template #error>
            <el-icon class="c-[--el-color-primary]" :size="36">
              <CircleCloseFilled />
            </el-icon>
          </template>
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="销量">{{ goodsInfo?.sales }}</el-descriptions-item>
      <el-descriptions-item label="浏览量">{{ goodsInfo?.views }}</el-descriptions-item>
      <el-descriptions-item label="收藏量">{{ goodsInfo?.collects }}</el-descriptions-item>
      <el-descriptions-item label="规格">{{ goodsInfo?.spec == 1 ? "单规格" : "多规格" }}</el-descriptions-item>
      <el-descriptions-item label="是否上架">{{ goodsInfo?.is_show ? "已上架" : "已下架" }}</el-descriptions-item>
      <el-descriptions-item label="是否热门">{{ goodsInfo?.is_hot ? "是" : "否" }}</el-descriptions-item>
      <el-descriptions-item label="是否推荐">{{ goodsInfo?.is_recommend ? "是" : "否" }}</el-descriptions-item>
      <el-descriptions-item label="是否新品">{{ goodsInfo?.is_new ? "是" : "否" }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ goodsInfo?.create_time }}</el-descriptions-item>
    </el-descriptions>
    <el-table :data="goodsInfo?.skuList" stripe style="width: 100%" :editable="true" border>
      <el-table-column prop="sku_name" label="规格" width="150px" align="center"></el-table-column>
      <el-table-column prop="image" label="图片" width="100px" align="center">
        <template #default="scope">
          <el-image class=" w-72px h-72px" :preview-teleported="true" :preview-src-list="[scope.row.image]"
            :src="scope.row.image != null && scope.row.image !== ''
        ? scope.row.image
        : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        ">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="售价" width="120px" align="center"> </el-table-column>
      <el-table-column prop="cost_price" label="成本价" width="120px" align="center"> </el-table-column>
      <el-table-column prop="original_price" label="划线价" width="120px" align="center"> </el-table-column>
      <el-table-column prop="stock" label="库存" width="120px" align="center"> </el-table-column>
      <el-table-column prop="bar_code" label="商品编号" width="120px" align="center"> </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" width="120px" align="center"> </el-table-column>
      <el-table-column prop="volume" label="体积(M³)" align="center"> </el-table-column>
    </el-table>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

interface IDrawerProps {
  info: any;
}

const props = withDefaults(defineProps<IDrawerProps>(), {
  info: {}
});

const goodsInfo = ref<any>(props.info)

onMounted(() => {
  if (goodsInfo.value.spec == 1) {
    goodsInfo.value.skuList = [
      {
        sku_name: goodsInfo.value.sku_name,
        stock: goodsInfo.value.stock,
        sales: goodsInfo.value.sales,
        price: goodsInfo.value.price,
        image: goodsInfo.value.image,
        cost_price: goodsInfo.value.cost_price,
        bar_code: goodsInfo.value.bar_code,
        original_price: goodsInfo.value.original_price,
        weight: goodsInfo.value.weight,
        volume: goodsInfo.value.volume,
      }
    ]
  }
})
</script>

<style lang="scss" scoped>

</style>
